<template>
  <div class="card">
    <div class="card-header" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filterFrom">
        <el-form-item label="类型" label-width="50px">
          <el-select v-model="filterFrom.type">
            <el-option label="全部" value=""></el-option>
            <el-option label="图片" value="1"></el-option>
            <el-option label="视频" value="2"></el-option>
            <el-option label="文档" value="3"></el-option>
            <el-option label="其它" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上传者ID" label-width="80px">
          <el-input v-model="filterFrom.id"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchData">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="card-body card-padding">
      <el-table :data="tableData" style="width: 100%" v-loading="isLoading" border>
        <el-table-column type="expand">
          <template scope="props">
            <div style="float: left;margin-left: 10px">
              <dl class="dl-horizontal">
                <dt>地址：</dt>
                <dd>{{props.row.address}}</dd>
              </dl>
              <dl v-if="props.row.type===1" class="dl-horizontal">
                <dd><img style="max-width:200px;max-height: 150px; " v-bind:src="props.row.address" /></dd>
              </dl>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="ID" width="70"></el-table-column>
        <el-table-column :formatter="typeFormatter" label="类型" width="150"></el-table-column>
        <el-table-column prop="uid" label="用户ID" width="80"></el-table-column>
        <el-table-column prop="uname" label="用户姓名" width="150"></el-table-column>
        <el-table-column prop="upload_time" label="注册时间" width="250"></el-table-column>
        <el-table-column label="操作">
          <template scope="scope">
            <el-button size="small" type="primary" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-pagination">
        <div style="float: left;margin-left: 20px;">
          <el-button type="text" @click="fetchData"><i class="zmdi zmdi-refresh" />&nbsp;&nbsp;重新加载</el-button>
        </div>
        <el-pagination :current-page="filterFrom.pnum" :page-sizes="[5, 10, 15, 20]" :page-size="filterFrom.records" layout="sizes, prev, pager, next, jumper,total"
          :total="totalRecords" @size-change="handleSizeChange" @current-change="handlePageChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import API from '../../api'

  var filterFrom = {
    pnum: 1,
    records: 10,
    id: '',
    type: ''
  }

  export default {
    data: function () {
      return {
        isLoading: false,
        tableData: [],
        filterFrom,
        totalRecords: 0
      }
    },
    created: function () {
      this.fetchData()
    },

    methods: {
      handleSizeChange: function (val) {
        this.filterFrom.records = val
        this.fetchData()
      },
      handlePageChange: function (val) {
        this.filterFrom.pnum = val
        this.fetchData()
      },
      handleDelete: function (selectData) {
        this.$confirm('你将删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var params = {
            'id': selectData.id
          }
          API.fileDelete(params, (data) => {
            this.fetchData()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      fetchData: function () {
        this.isLoading = true
        API.fileList(this.filterFrom, (data) => {
          this.isLoading = false
          this.tableData = data.list
          this.totalRecords = data.totalRecords
        })
      },
      typeFormatter: function (row) {
        switch (row.type) {
          case 1: return '图片'
          case 2: return '视频'
          case 3: return '其它'
          default: return ''
        }
      }
    }
  }

</script>
